<!--  -->
<template>
  <div id='compage'>
    <a-row>
      <a-col :span="12">
        <div id="main" style="width: 400px;height: 500px;"></div>
      </a-col>
      <a-col :span="12">
      <a-table
          bordered
          :columns="columns"
          :row-key="record => record.id"
          :data-source="cusTableList"
        >
        <template slot="commend" slot-scope="commend,list">
          <a-switch v-if="commend == 1" default-checked @click="changeCommenStatus(list.id)" />
          <a-switch v-else @click="changeCommenStatus(list.id)"/>
        </template>
        <template slot="click" slot-scope="click">
          {{ Number((click / allClick)).toFixed(2) * 100 }}%
        </template>
      </a-table>
      </a-col>
    </a-row>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { getcustombook } from '@/api/api.js'
import { changeCommen } from '@/api/webapi.js'
import * as echarts from 'echarts'
const columns = [
  {
    title: '序号',
    customRender: (text, record, index) => `${index + 1}`,
    width: '70px'
  },
  {
    title: '书名',
    dataIndex: 'title',
    width: '200px'
  },
  {
    title: '类型',
    dataIndex: 'type'
  },
  {
    title: '推荐',
    dataIndex: 'commend',
    scopedSlots: { customRender: 'commend' }
  },
  {
    title: '转换率',
    dataIndex: 'click',
    scopedSlots: { customRender: 'click' }
  }
]
export default {
// import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
  // 这里存放数据
    return {
      columns,
      show: true,
      cusTableList: [],
      allClick: 0
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    changeCommenStatus (id) {
      changeCommen(id).then((res) => {
        if (res.code === 200) {
          this.loadCanvas()
        } else {
          this.$message.error('切换失败')
        }
      })
    },
    resizeCanvas () {
      const page = document.getElementById('compage')
      const canvasel = document.getElementById('main')
      canvasel.style.width = page.clientWidth / 2 + 'px'
      canvasel.style.height = page.clientHeight * 0.9 + 'px'
      this.myChart.resize()
    },
    async loadCanvas () {
      const seriesdata = []
      await getcustombook().then((res) => {
        if (res.code === 200) {
          const list = this.cusTableList = res.data.list
          for (let i = 0; i < list.length; i++) {
            this.allClick += list[i].click
            const obj = {}
            obj.value = list[i].click
            obj.name = list[i].title
            seriesdata.push(obj)
          }
        }
      })
      var chartDom = document.getElementById('main')
      var myChart = echarts.init(chartDom)
      var option
      option = {
        title: {
          text: '转化率',
          subtext: '百分比',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '推荐转化率',
            type: 'pie',
            radius: '50%',
            data: seriesdata,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      option && myChart.setOption(option)
      this.myChart = myChart
      this.resizeCanvas()
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.loadCanvas()
    const that = this
    window.onresize = function () {
      that.resizeCanvas()
    }
  }
}
</script>
<style lang='less' scoped>
body,html{
background: #0f375f;
}
#compage{
width: 100%;
height: 100%;
}
.fatherCanvas{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-around;
}
#main{
}
.tbimg{
width: 32px;
height: 45px;
}
</style>
